<script language="javascript">
function AddItem() {
var form = document.forms.form1;
var a = form.Liste1.options[form.Liste1.selectedIndex].text;
var b = form.Liste1.options[form.Liste1.selectedIndex].value;
var option = new Option(a,b);
form.Liste2.options[form.Liste2.length] = option;
}
</script>

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.8.3.js"></script>

<h2 align="center">Schedul Activity</h2>
<div id="SchedulActivity">
	<fieldset id="Time">
	<legend>Start/Stop time</legend>
	<div id="row">
		<div class="col">Start time for the work</div>
		<div class="value" id="name"><input value="01/12/2013" type="date" name="eTime" /></div>
	</div>
	
	<div id="row">
		<div class="col">Stop time for the work</div>
		<div class="value" id="name"><input value="07/12/2013" type="date" name="lTime" /></div>
	</div>
	</fieldset>
	<fieldset>
		<legend>Consumed parts</legend>
		<form name="form1">
			<select name="Liste1" size="3">
			 <option>Tool 1</option>
			 <option>Tool 2</option>
			 <option>Tool 3</option>
			 <option>Tool 4</option>
			 <option>Tool 5</option>
			 <option>Tool 6</option>
			 <option>Tool 7</option>
			</select>
			<input type="button" OnClick="AddItem()" value="+">
			
			<select name="Liste2" multiple size="3" style="width: 200px;">
			</select>
			<input type="button" OnClick="RemoveItem()" value="-">
		</form>
	</fieldset>
	<fieldset>
		<legend>Returned parts</legend>
		<form name="form1">
			<select name="Liste1" size="3">
			 <option>Tool 1</option>
			 <option>Tool 2</option>
			 <option>Tool 3</option>
			 <option>Tool 4</option>
			 <option>Tool 5</option>
			 <option>Tool 6</option>
			 <option>Tool 7</option>
			</select>
			<input type="button" OnClick="AddItem()" value="+">
			
			<select name="Liste2" multiple size="3" style="width: 200px;">
			</select>
			<input type="button" OnClick="RemoveItem()" value="-">
		</form>
	</fieldset>
	<fieldset>
		<legend>Replaced parts</legend>
		<form name="form1">
			<select name="Liste1" size="3">
			 <option>Tool 1</option>
			 <option>Tool 2</option>
			 <option>Tool 3</option>
			 <option>Tool 4</option>
			 <option>Tool 5</option>
			 <option>Tool 6</option>
			 <option>Tool 7</option>
			</select>
			<input type="button" OnClick="AddItem()" value="+">
			
			<select name="Liste2" multiple size="3" style="width: 200px;">
			</select>
			<input type="button" OnClick="RemoveItem()" value="-">
		</form>
	</fieldset>
	<fieldset>
		<legend>Steps to perform the work</legend>
		<ul>
			<li>
				<b>Step 1 : </b><br/>
				<textarea>Descreption</textarea></li>
			<li>
				<b>Step 2 : </b><br/>
				<textarea>Descreption</textarea>
			</li>
		</ul>
	</fieldset>
	<fieldset>
		<legend>expenses</legend>
		<table>
			<thead>
				<tr>
				<th>expense name</th>
				<th>expense price (UDS $)</th>
				<th>expenses descreption</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" value="lunch"/></td> 
					<td><input type="text" value="53$"/></td>
					<td><textarea>Descreption</textarea></li></td>
			</tr>
			<tr>
				<td><input type="text" value="travel"/></td>
				<td><input type="text" value="2$"/></td>
				<td><textarea>Descreption</textarea></td>
			</tr>
		</tbody>
		</table>
	</fieldset>
	
	<div id="row">
		<div id="save" align="center">
			<button id="debrief">debrief</button>
		</div>
	</div>
</div>
<script>
$("button#debrief").click(function(){
	$("#body").load("ActivityForTechnician.html");
});
</script>